
<template>
	<view>
		<u-navbar title='订单详情' leftIconColor='white' :autoBack="true"  :bgColor="color" titleStyle="color:white" :placeholder="true"></u-navbar>
	    <view class="content">
			<view class="item">
				<view style="display: flex;align-items: center;">
					<u-image src='@/static/home.png' width="26rpx" height="26rpx"></u-image>
					<view style="margin-left: 10rpx;font-weight: 700;font-size: 14px;margin-right:10rpx">{{info.storeName}}</view>
					<u-tag v-if="info.outStatus == 0" text="未付款"  size="mini" plain></u-tag>
					<u-tag v-else text="已付款" size="mini" plain></u-tag>
				</view>
				<view>
					{{info.createTime}}
				</view>
			</view>
			<view class="infoAll">
				 <view>总价:{{info.totalAmount}}</view>
				 <view>折扣:<text :style="{'color':color}">{{info.subAmount}}</text></view>
				 <view>实付:<text style="color:red">{{info.disPrice}}</text></view>
			</view>
			<view>
				<view class="infoItem">
					<view>姓名</view>
					<view>{{info.storeContacts}}</view>
				</view>
				<view class="infoItem">
					<view>仓库</view>
					<view>
						<text :style="{'color':color,'text-decoration':'underline'}">{{info.warehouse.warehouseName}}</text>
						<!-- <u-tag plain :text="info.warehouse.warehouseName"></u-tag> -->
					</view>
				</view>
				<view class="infoItem">
					<view>电话</view>
					<view style="display: flex;align-items: center;justify-content: flex-end;" @click="makePhone">
						<view>{{info.mobile}}</view>
						<u-icon name="phone-fill" size="18px" :color='color' style="margin-left:10rpx;"></u-icon>
					</view>
				</view>
				<view class="infoItem">
					<view>单号</view>
					<view style="display: flex;align-items: center;justify-content: flex-end;" @click="copyOrderId">
						<view>{{info.saleId}}</view>
						<image src="../../static/copy.png" style="width: 24rpx;height:24rpx;margin-left: 10rpx;"></image>
					</view>
				</view>
				<view class="infoItem">
					<view>地址</view>
					<view>{{info.storeAddress}}</view>
				</view>
				<view class="infoItem">
					<view>备注</view>
					
					<view v-if="info.remarkInfo.remark" style="color:red">{{info.remarkInfo.remark}}</view>
					<view v-else style="color:red">{{info.remark}}</view>
				</view>
				<view class="infoItem">
					<view>操作</view>
					 <view style="display: flex;justify-content: flex-end">
						 <view style="width:120rpx;margin-right: 30rpx;"> <u-button size="mini" icon='trash' :color='color' plain @click='cancelOrder'>取消</u-button></view>
						<view style="width: 120rpx;">  <u-button size="mini" color="linear-gradient(to right, rgb(0, 168, 94), rgb(36, 203, 195))" @click="toPath">补货</u-button></view>
					 </view>
				</view>
			</view>
		</view>
		<view class="content" style="margin-top: 20rpx;">
			 <view class="materialTitle" style="">
			 	<view style="width: 300rpx;">材料名称</view>
			 	<view style="width:150rpx">购买数量</view>
			 	<view style="width:150rpx">单价</view>
			 	<view style="width:150rpx">小计</view>
			 </view>
			 <scroll-view style='height: 600rpx' scroll-y="true">
			 	<view v-for="(v,i) in info.materialList" :key="i" class='listContent'>
			 		<view style="width: 300rpx;">{{v.name}}</view>
			 		<view style='width: 150rpx;'>{{v.buyCount}}</view>
			 		<view style="width: 150rpx;">{{v.salePrice}}</view>
			 		<view style="width: 150rpx;" :style='{"color":color}'>{{v.totalPrice}}</view>
			 	</view>
			 </scroll-view>
		</view>
		<view style="padding:0 20rpx;margin-top:50rpx">
			<u-button :color='color' @click='back'>返回</u-button>
		</view>
	</view>
</template>

<script>
	import Decimal from 'decimal.js';
	let app = getApp();
	export default{
		data(){
			return{
				color:app.globalData.defaultColor,
				info: {}
			}
		},
		onLoad(option){
			let info = JSON.parse(option.info);
			this.info = info;
			if(this.info.materialList.length>0){
				this.info.materialList.map(el=>{
					el.totalPrice = Decimal(el.buyCount).mul(Decimal(el.salePrice)).toNumber();
				})
			}
			
		},
		methods:{
			toPath(){
				uni.navigateTo({
					url: '/pages/material/index?type=add&&info=' + encodeURIComponent(JSON.stringify(this.info))
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			cancelOrder(){
				if (this.info.outStatus != 0) {
					uni.$u.toast('已提交至仓库的订单,不支持取消!');
					return;
				} else {
					uni.showModal({
						title: '提示:',
						content: `删除${this.info.storeName}订单？`,
						success: (res) => {
							if (res.confirm) {
								uni.$u.http.post('/sale/weChatSaleDelete', {
									'saleId': this.info.saleId
								}).then(res => {
									 uni.navigateBack({
										 delta:1
									 })
								})
							}
						}
					})
				
				}
			},
			makePhone(){
				uni.makePhoneCall({
					phoneNumber:this.info.mobile
				})
			},
			copyOrderId() {
				uni.setClipboardData({
					data: this.info.saleId,
					success: (res) => {
						uni.$u.toast('订单号复制成功!')
					}
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #f8f8f8;
		font-size: 12px;
	}
</style>
<style lang="scss" scoped>
	.content{
		padding:20rpx;
		background-color: white;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.infoAll{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #e7f4f5;
		padding:30rpx 20rpx; 
		margin: 20rpx 0;
		border-radius: 10rpx;
		
	}
	.infoItem{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.infoItem>view:nth-child(1){
		color:#787878;
		width: 80rpx;
	}
	.infoItem>view:nth-child(2){
		text-align: right;
		color:#787878;
		width: calc(100%  - 100rpx);
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.materialTitle {
		font-size: 14px;
		display: flex;
		align-items: center;
		text-align: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee
	}
	
	.listContent {
		display: flex;
		text-align: center;
		align-items: center;
		position: relative;
		font-size: 12px;
		padding: 30rpx 10rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.listContent>view {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
	
	}
	
</style>